<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Reports' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card" style="margin-top: 20px">
      <el-alert title="只允许为第三级分类设置相关参数" type="warning" show-icon>
        <!--  -->
      </el-alert>
      选择商品分类:
      <el-cascader
        v-model="kes"
        :options="options"
        :props="props"
        style="margin-top: 15px; width: 300px"
        @change="handleChange"
      ></el-cascader>
      <!--  -->
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-top: 15px"
      >
        <el-tab-pane label="动态参数" name="many">
          <el-button
            type="primary"
            :disabled="disabled"
            size="mini"
            @click="addShow"
            style="margin-bottom: 10px"
          >
            添加参数
          </el-button>
          <div v-if="activeName == 'many'">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column width="50" type="expand">
                <template slot-scope="scope">
                  <div style="width: 90%; margin: auto">
                    <el-tag
                      :key="index"
                      v-for="(item, index) in scope.row.attr_vals"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(index, scope.row)"
                      style="
                        margin-left: 10px;
                        margin-right: 10px;
                        margin-bottom: 5px;
                      "
                    >
                      {{ item }}
                    </el-tag>
                    <el-input
                      v-if="scope.row.inputVisible"
                      v-model="scope.row.inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm(scope.row)"
                      @blur="handleInputConfirm(scope.row)"
                      style="width: 100px"
                    >
                    </el-input>
                    <el-button v-else size="small" @click="showInput(scope.row)"
                      >+ New Tag</el-button
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="50" type="index"> </el-table-column>
              <el-table-column label="参数名称" prop="attr_name">
              </el-table-column>
              <el-table-column> </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="edit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    @click="del(scope.row.attr_id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="静态参数" name="only">
          <el-button
            type="primary"
            :disabled="disabled"
            size="mini"
            @click="addShow1"
            style="margin-bottom: 10px"
          >
            添加属性
          </el-button>
          <div v-if="activeName == 'only'">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column width="50" type="expand">
                <template slot-scope="scope">
                  <div style="width: 90%; margin: auto">
                    <el-tag
                      :key="index"
                      v-for="(item, index) in scope.row.attr_vals"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(index, scope.row)"
                      style="
                        margin-left: 10px;
                        margin-right: 10px;
                        margin-bottom: 5px;
                      "
                    >
                      {{ item }}
                    </el-tag>
                    <el-input
                      v-if="scope.row.inputVisible"
                      v-model="scope.row.inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm(scope.row)"
                      @blur="handleInputConfirm(scope.row)"
                      style="width: 100px"
                    >
                    </el-input>
                    <el-button v-else size="small" @click="showInput(scope.row)"
                      >+ New Tag</el-button
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="50" type="index"> </el-table-column>
              <el-table-column label="参数名称" prop="attr_name">
              </el-table-column>
              <el-table-column> </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="edit1(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    @click="del(scope.row.attr_id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 添加参数的模态框 -->
      <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item :label="title1" prop="attr_name">
            <el-input v-model="ruleForm.attr_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改的模态框 -->
      <el-dialog :title="title" :visible.sync="dialogVisible1" width="50%">
        <el-form
          :model="ruleForm1"
          :rules="rules"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item :label="title1" prop="attr_name">
            <el-input v-model="ruleForm1.attr_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="revamp">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "MyVueParams",

  data() {
    return {
      // 默认选中动态参数
      activeName: "many",
      // 级联选择器的数据id
      kes: [],
      //   数据源
      options: [],
      //   配置项
      props: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
      //   动态参数数据
      tableData: [],

      dialogVisible: false,
      dialogVisible1: false,
      ruleForm: {
        attr_name: "",
      },
      ruleForm1: {},
      // 正则校验
      rules: {
        attr_name: [
          { required: true, message: "请输入动态参数", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },

      // 显示隐藏标识
      falg: true,
      // 属性id
      attrId: "",
      title: "",
      title1: "",
    };
  },
  mounted() {
    this.list();
  },

  methods: {
    // 渲染商品分类列表
    list() {
      this.$http.get(`categories`, { params: { type: 3 } }).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.options = res.data.data;
        }
      });
    },
    // 参数列表数据
    getParamsList() {
      this.$http
        .get(`categories/${this.paramsId}}/attributes`, {
          params: { sel: this.activeName },
        })
        .then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            res.data.data.filter((item) => {
              // 将字符串分割成数组因为遍历需要
              if (item.attr_vals == "") {
                item.attr_vals = [];
              } else {
                item.attr_vals = item.attr_vals.split(" ");
              }

              // 标识用来显示隐藏
              item.inputVisible = false;
              // 双向数据绑定
              item.inputValue = "";
            });
            this.tableData = res.data.data;
          }
        });
    },
    handleClick() {
      if (this.kes.length != 3) {
        return;
      }
      this.getParamsList();
    },
    // 当选中节点变化时触发
    handleChange() {
      if (this.kes.length != 3) {
        return;
      }
      this.getParamsList();
    },
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm(row) {
      let inputValue = row.inputValue;
      if (inputValue.trim()!='') {
        row.attr_vals.push(inputValue);
        this.tag(row);
      }
      row.inputVisible = false;
      row.inputValue = "";
    },
    // 定义方法请求接口编辑提交
    tag(row) {
      //   attr_vals提交的时候需要字符串拿下来用的时候需要是数组，这里需要字符串
      this.$http
        .put(`categories/${this.paramsId}/attributes/${row.attr_id}`, {
          attr_name: row.attr_name,
          attr_sel: row.attr_sel,
          attr_vals: row.attr_vals.join(" "),
        })
        .then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.$message.success(res.data.meta.msg);
          } else {
            this.$message.error(res.data.meta.msg);
          }
        });
    },
    // 点击标签移除
    handleClose(index, row) {
      row.attr_vals.splice(index, 1);
      //   调用方法
      this.tag(row);
    },
    // 添加动态
    addShow() {
      this.dialogVisible = true;
      this.title = "添加动态参数";
      this.title1 = "动态参数";
      this.falg = false;
      this.ruleForm = {};
    },
    // 添加静态
    addShow1() {
      this.dialogVisible = true;
      this.title = "添加静态属性";
      this.title1 = "静态属性";
      this.falg = true;
      this.ruleForm = {};
    },
    add() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          this.$message("输入信息不正确");
        } else {
          this.$http
            .post(`categories/${this.paramsId}/attributes`, {
              attr_name: this.ruleForm.attr_name,
              attr_sel: this.activeName,
            })
            .then((res) => {
              console.log(res);
              if (res.data.meta.status == 201) {
                this.$message.success(res.data.meta.msg);
                this.getParamsList();
                this.dialogVisible = false;
              } else {
                this.$message.error(res.data.meta.msg);
              }
            });
        }
      });
    },
    // 编辑动态参数
    edit(row) {
      this.title = "修改动态属性";
      this.dialogVisible1 = true;
      this.title1 = "动态属性";
      this.attrId = row.attr_id;
      this.ruleForm1 = row;
    },
    // 编辑静态属性
    edit1(row) {
      this.title = "修改静态属性";
      this.dialogVisible1 = true;
      this.title1 = "静态属性";
      this.attrId = row.attr_id;
      this.ruleForm1 = row;
    },
    revamp() {
      this.$refs.ruleForm1.validate((valid) => {
        if (!valid) {
          this.$message("输入信息不正确");
        } else {
          this.$http
            .put(`categories/${this.paramsId}/attributes/${this.attrId}`, {
              attr_name: this.ruleForm1.attr_name,
              attr_sel: this.ruleForm1.attr_sel,
            })
            .then((res) => {
              console.log(res);
              if (res.data.meta.status == 200) {
                this.$message.success(res.data.meta.msg);
                this.dialogVisible1 = false;
              } else {
                this.$message.error(res.data.meta.msg);
              }
            });
        }
      });
    },
    // 删除
    del(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete(`categories/${this.paramsId}/attributes/${id}`)
            .then((res) => {
              if (res.data.meta.status == 200) {
                this.$message.success(res.data.meta.msg);
                this.getParamsList()
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    // 按钮的禁用
    disabled() {
      if (this.kes.length != 3) {
        return true;
      } else {
        return false;
      }
    },
    // 分类id
    paramsId() {
      if (this.kes.length != 3) {
        return;
      } else {
        return this.kes[this.kes.length - 1];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>